<template>
  <!-- 同时传入src与type，则src优先 -->
  <div
    class="o-icon"
    :style="{display:'inline-block'}"
    :title="icon.title"
    v-on="$listeners"
  >
    <!-- 使用image作为自定义图标 -->
    <el-image
      v-if="icon.src"
      :style="[{
        width:'16px', height:'16px' },icon.style]"
      :src="icon.src"
      :fit="'scale-down'"
    />
    <!-- 外界传入图标类型 与element ui 图标类型一致 如没有找到，图标会为空 -->
    <i
      v-if="!icon.src && icon.type"
      :class="icon.type"
      :style="icon.style"
    />
  </div>
</template>
<script>
const isObject = (obj) => {
  return Object.prototype.toString.call(obj) === "[object Object]"
}
export default {
  name: "o-icon",
  props: {
    icon: {
      type: Object,
      default() {
        return {}
      },
      validator(value) {
        if (!value.type && !value.src) {
          console.error("src or type need one")
          return false
        }
        if (value.style && !isObject(value.style)) {
          console.error("style need Object")
          return false
        }
        if (value.src) {
          if (!value.src.includes("base64,") && !value.src.includes("http")) {
            console.error("src format need base64 or absolute url")
            return false
          }
        }

        return true
      }
    }
  }

}
</script>